<template>
	<div class="aside-inner">
		<ul class="nav-menu" v-if="show1" id="navf">
			<li class="actived index">
				<router-link to="/index" class="era"><i class="icon iconfont icon-homepage"></i><span>首页概要</span></router-link>
			</li>
			<li>
				<a class="era"><i class="icon iconfont icon-xitong"></i><span>系统管理</span></a>
				<ul class="erji">
					<li class="lis">
						<router-link to="/Operator">用户管理</router-link>
					</li>
					<li class="lis">
						<router-link to="/log">日志管理</router-link>
					</li>
					<li class="lis">
						<router-link to="/sys">系统选项</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="era"><i class="icon iconfont icon-jichuguanli"></i><span>基础管理</span></a>
				<ul class="erji">
					<li class="lis">
						<router-link to="/dictionary">词典管理</router-link>
					</li>
					<li class="lis">
						<router-link to="/custom">自定义管理</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="era"><i class="icon iconfont icon-kanshu03-copy"></i><span>业务管理</span></a>
				<ul class="erji">
					<li class="lis">
						<router-link to="/sales">员工管理</router-link>
					</li>
					<li class="lis">
						<router-link to="/project">项目管理</router-link>
					</li>
					<li class="lis">
						<router-link to="/client">客户管理</router-link>
					</li>
					<!--<li class="lis">
						<router-link to="/salesMan">业务员管理</router-link>
					</li>-->
				</ul>
			</li>
		</ul>
		<ul class="nav-menu1" v-else="">
			<li class="actived index">
				<router-link to="/index" class="era"><i class="icon iconfont icon-homepage"></i><span>首页概要</span></router-link>
			</li>
			<li>
				<a class="era"><i class="icon iconfont icon-xitong"></i><span>系统管理</span></a>
				<ul class="erji1">
					<li>
						<router-link to="/Operator">用户管理</router-link>
					</li>
					<li>
						<router-link to="/log">日志管理</router-link>
					</li>
					<li>
						<router-link to="/sys">系统选项</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="era"><i class="icon iconfont icon-jichuguanli"></i><span>基础管理</span></a>
				<ul class="erji1">
					<li>
						<router-link to="/dictionary">词典管理</router-link>
					</li>
					<li>
						<router-link to="/custom">自定义管理</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="era"><i class="icon iconfont icon-kanshu03-copy"></i><span>业务管理</span></a>
				<ul class="erji1">
					<li>
						<router-link to="/sales">员工管理</router-link>
					</li>
					<li>
						<router-link to="/project">项目管理</router-link>
					</li>
					<li>
						<router-link to="/client">客户管理</router-link>
					</li>
					<!--<li>
						<router-link to="/salesMan">业务员管理</router-link>
					</li>-->
				</ul>
			</li>
		</ul>

	</div>
</template>
<script>
	import emitt from './emit'
	export default {
		name: 'sidebard',
		data() {
			return {
				horizontal:false,
				hide:false,
				show1:true,
				shoes:true,
			};
		},
		mounted:function(){
			var me =this
			emitt.$on("toggle", function (isshow) {
           		me.hide = isshow;
           		me.show1 = !isshow;
    		})	
    		this.$nextTick(function() {
    			$(".nav-menu>li").click(function(){
    				$(this).addClass("actived").siblings().removeClass("actived")
    			})
    			$(".index").click(function(){
    				$(".erji").hide(300)
    			})
    			$(".erji").hide()
    			$("#navf>li").on('click',function(){
    				var that = $(this)
    				$(this).children(".erji").toggle(200).addClass("animated slideInLeft").parent().siblings().children("ul").hide(300)
    				setTimeout(function(){
    					that.children(".erji").removeClass("slideInLeft animated")
    				}, 1000);
    			})
    			$(".nav-menu>li>ul").click(function(){
    				event.stopPropagation();
    			})
    			$(".lis").click(function(){
//  				$(this).parent("ul").parent("li").removeClass("erli")
					$(".lis").removeClass("erli")
    				$(this).addClass("erli")
    			})
	       })
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			toggle:function(){
				this.horizontal=!this.horizontal
				this.shoes=!this.shoes
				emitt.$emit("toggle",this.shoes)
			}
		}
	}
</script>
<style scoped>
	ul li{
		list-style: none;
	}
	.anniu{
		position:absolute;
		right: -48px;
		top: 5px;
		background: none !important;
		cursor: pointer;
		font-size: 35px;
		color: #fff;
	}
	.anniu .iconfont{
		font-size: 35px;
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
		border-radius: 0;
	}
	.el-menu{
		background-color: #3a3f51;
	}
	.el-menu-item, .el-submenu__title{
		color: #e1e2e3;
	}
	.el-menu-vertical-demo i{
		color: #e1e2e3 !important;
	}
	.el-menu-vertical-demo .title{
		color: #e1e2e3 !important;
	}
	.bgg{
		background-color: #3a3f51 !important;
	}
	.bgg:hover{
		color:#48576a ;
	}
	.bgg a{
		text-decoration: none;
		color: #e1e2e3 !important
	}
	.ulr li:hover a{
		color: #9289ca;
	}
	.title a{
		text-decoration: none;
		color: #e1e2e3 !important
	}
	.title a:hover{
		color: #9289ca !important;
	}
	.asidetop{
		height: 50px;
	}
	.el-icon-setting{
		transition: all 0.2s;
	}
	.bigfont{
		font-size: 20px !important;
	}
	.ahover{
		display: block;
		text-decoration: none !important; 
	}
	.ahover span{
		padding-left: 10px;
	}
	.icodd{
		display: initial !important;
	}
	.liactive .title{
		color:#9289ca !important;
	}
	.liactive .icodd{
		color:#9289ca !important;
	}
	.el-submenu:hover .icodd{
		color:#9289ca !important;
	}
	.el-submenu:hover .title{
		color:#9289ca !important;
	}
	.el-submenu:hover .el-submenu__icon-arrow{
		color:#9289ca !important;
	}
	
	
	.nav-menu{
		height: 100%;
		background-color: #3a3f51;
		width: 200px;
		color: #fff;
		transition: all 0.3s;
	}
	.nav-menu li.actived{
		    border-left-color: #9289ca;
	}
	
	.nav-menu li{
		border-left: 3px solid transparent;
	    -webkit-transition: border-left-color 0.2s ease;
	    -o-transition: border-left-color 0.2s ease;
	    transition: all 0.2s ease;
	}
	.nav-menu>li{
		position: relative;
		transition: all 0.3s;
	}
	
	.nav-menu a {
		color: #e1e2e3;
		padding: 12px 24px;
	    letter-spacing: .025em;
	    font-weight: normal;
	    cursor: pointer;
	    display: block;
	    text-decoration: none;
	    transition: all 0.3s;
	}
	.nav-menu i{
		width: 24px;
		display: inline-block;
		transition: all 0.3s;
	}
	.erji li a {
	    padding-left:45px;
	    transition: all 0.3s;
	}
	.actived .era{
		color:#9289ca;
	}
	.nav-menu a:hover{
		color:#9289ca ;
	}
	.erli a{
		color: #9289ca ;
	}
	.nav-menu span{
		padding-left: 10px;
	}
	
	
	.nav-menu1{
		height: 100%;
		background-color: #3a3f51;
		width: 70px;
		color: #fff;
		transition: all 0.3s;
	}
	.nav-menu1 span{
		display: none;
		transition: all 0.3s;
	}
	.nav-menu1 li.actived{
		    border-left-color: #9289ca;
	}
	
	.nav-menu1>li{
		border-left: 3px solid transparent;
	    -webkit-transition: border-left-color 0.2s ease;
	    -o-transition: border-left-color 0.2s ease;
	    transition: all 0.2s ease;
	}
	.nav-menu1>li{
		position: relative;
	}
	
	.nav-menu1 a {
		color: #e1e2e3;
		padding: 20px 20px;
	    letter-spacing: .025em;
	    font-weight: normal;
	    cursor: pointer;
	    display: block;
	    text-decoration: none;
	    transition: all 0.3s;
	}
	.nav-menu1 a i{
		font-size: 28px !important;
	}
	.nav-menu1>li>.erji1{
		width: 200px;
		background:  #3a3f51;
		position: absolute;
		display: none;
		top: 0;
		left: 67px;
		z-index: 99;
		transition: all 0.3s;
	}
	.nav-menu1>li:hover .erji1{
		display: block !important;
	}
	@keyframes slideInLeft {
	  from {
	    transform: translate3d(-100%, 0, 0);
	    visibility: visible;
	  }
	
	  to {
	    transform: translate3d(0, 0, 0);
	  }
	}
	
	.slideInLeft {
	  animation-name: slideInLeft;
	}
	.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

</style>